<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!--bootstrap-->
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/bootstrap/css/bootstrap.min.css"/>
    <!--bootstrap-toastr-->
    <script type="text/javascript" src="/js/toastr/toastr.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/toastr/toastr.css"/>
    <!--zTree-->
    <link rel="stylesheet" type="text/css" href="/zTreev3/css/zTreeStyle/zTreeStyle.css"/>
    <script src="/zTreev3/js/jquery.ztree.all.js"></script>
</head>
<body>
<form class="form-horizontal" role="form" id="updateForm">
    <div class="form-group">
        <input type="hidden" id="roleId" th:value="${role.id}">
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">角色名称</label>
        <div class="col-sm-5">
            <input type="text" name="name" th:value="${role.name}" class="form-control" id="name" placeholder="请输入">
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">权限</label>
        <div class="col-sm-4">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-success" onclick="updateById()">确定</button>
        </div>
    </div>
</form>
</body>
<script>
    function updateById() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        var nodeIds = [];
        for (var i = 0; i < nodes.length; i++) {
            nodeIds.push(nodes[i].id);
        }
        if (nodeIds.length <= 0) {
            toastr.error("请选择权限");
            return;
        }
        var role = {
            "name": $("#name").val(),
        }
        var j_role = JSON.stringify(role);
        $.ajax({
            url: "/role/" + $("#roleId").val() + "?rid=" + nodeIds,
            dataType: "json",
            type: "put",
            contentType : 'application/json;charset=UTF-8',
            data: j_role,
            success: function (data) {
                console.log(data);
                if (data.code == 200 ){
                    toastr.success("修改成功");
                    setTimeout(function () {
                        parent.location.reload();
                    }, 1000);
                } else{
                    toastr.success("修改不一定成功");
                    setTimeout(function () {
                        parent.location.reload();
                    }, 1000);
                }
            },
            error: function (e) {
                alert("系统错误");
            }
        })
    }

    $(document).ready(function () {
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            check: {
                enable: true,
                autoCheckTrigger: true
            },
            async: {
                enable: true,
                url: "/menu/getzTreeChecked/" + $("#roleId").val(),
                autoParam: ["id", "name"],
                type: "get"
            }
        }

        $.fn.zTree.init($("#treeDemo"), setting);
    });

</script>
</html>